<template>
  <div class="app-container">
    
      <!-- 添加讲师 -->
    <el-form label-width="120px">
      <el-form-item label="图片名称">
        <el-input v-model="crmBanner.title" />
      </el-form-item>

      <el-form-item label="图片排序">
        <el-input-number
          v-model="crmBanner.sort"
          controls-position="right"
          :min="0"/>
      </el-form-item>

      
      <!-- 讲师头像：TODO -->
      <!-- 讲师头像 -->
          <el-form-item label="图片">
          <!-- 头衔缩略图 -->
          <pan-thumb :image="crmBanner.imageUrl"/>
          <!-- 文件上传按钮 -->
          <el-button type="primary" icon="el-icon-upload"
          @click="imagecropperShow=true">更换图片
          </el-button>
          <!--
          v-show：是否显示上传组件
          :key：类似于id，如果一个页面多个图片上传控件，可以做区分
          :url：后台上传的url地址
          @close：关闭上传组件
          @crop-upload-success：上传成功后的回调 -->
          <image-cropper
              v-show="imagecropperShow"
              :width="600"
              :height="417"
              :key="imagecropperKey"            
              :url="BASE_API+'/eduoss/fileoss/file'"
              field="file"
              @close="close"
              @crop-upload-success="cropSuccess"/>
          </el-form-item>
      <el-form-item>
        <el-button
          :disabled="saveBtnDisabled"
          type="primary"
          @click="saveOrUpdate" >保存</el-button>
      </el-form-item>
    </el-form>

  </div>
</template>

<script>
import banner from "@/api/ban/banner.js" 
import teacherAPI from '@/api/edu/teacher.js'
import ImageCropper from '@/components/ImageCropper'
import PanThumb from '@/components/PanThumb'
export default {
  components: { ImageCropper, PanThumb },   //需要初始化引入的两个做图片上传的组件，不然会报错
//定义变量初始化数据 
  data() {    //data里面定义的数据会先执行，后面还会执行created()方法，如果在data里面定义的数据又在created()里面重新定义了，会被清空。。。
    return {
        crmBanner:{
        title: '',
        sort: 0,
        linkUrl: 1,
        imageUrl: '',
        
        imageUrl: process.env.OSS_PATH+'/2022/02/12/fcdea541da5b438b8a33f272c12e6c9efile.png' //在这赋值默认图片没用，因为在后面的created()方法
        // 里面清空过teacher对象的值，created()是在data后面执行，害我弄了很久
        },
        saveBtnDisabled:false, //保存按钮是否禁用
        teacherTitle: "", //自己做的本来是做标题显示的，但没找到标题的UI。。。
        imagecropperShow: false,//上传弹窗组件是否显示
        imagecropperKey: 0 , //上传组件key值 ,后面每次关闭或者打开组件就会 + 1 ，通过这个变动来让该组件每次都能初始化数据，不然会有个bug上传后一直保持上传成功的状态
        BASE_API: process.env.BASE_API, // 接口API地址 ,这个是取的dev.env.js里面的BASE_API值，是固定写法，要先在data里面初始化，才能在上面实例调用
        
        
    }
  },
  //页面渲染前执行
  created() { 
       //这是把路由跳转时是否携带id参数进行判断，如果携带了id就是要修改，
       //执行修改方法，没有id就执行添加，把它抽取出来，在监听里面也能用到
       this.init() 
       
  },
  //监听
  watch:{
    $route(to,from){ //路由变化方式，路由发生变化，方法就会执行
      this.init()
    }
  },
  //方法的定义
  methods: {
     saveOrUpdate(){   // 添加或者修改，后面调用不同效果不一样，为了少写修改页面
     //判断修改还是添加，根据teacher是否有id，修改时带id；添加时不带id，因为系统默认给id值
        if(this.crmBanner.id){
           this.updateTeacher(this.crmBanner)//修改讲师
        }
        else{
            this.saveBanace() //添加讲师
        }
        
     },
     saveBanace(){  //添加讲师方法
     banner.addBanner(this.crmBanner) //调用引入的teacher.js
     .then(response=>{  //添加成功
     //提示信息
         this.$message({   
         type: 'success',
         message: '添加成功!' 
                    })
     //回到列表页面  路由跳转
         this.$router.push({path:'/Banner/table'})    
     })
    //  .catch(error=>{   这里会输出一次异常信息，在封装的工具类request里面也封装处理了服务端接口获取的错误信息，
    //这里不定义，直接在接口用自定义捕获的异常信息返回给request再输出也可以。不然会打印两次异常信息。。。
    //      this.$message({   
    //      type: 'success',
    //      message: '添加失败，用户名输入错误或者已存在!' 
    //                 })
    //  })
     },
     
     close(){   //关闭上传弹窗的方法，      
         this.imagecropperShow = false // imagecropperShow表示是否显示上传组件，false不显示true显示
        
         this.imagecropperKey = this.imagecropperKey + 1  // 上传失败后，重新打开上传组件时初始化组件，否则显示上一次的上传结果
     },
     cropSuccess(data){ //上传成功的方法 
     console.log(data)
         this.imagecropperKey = this.imagecropperKey+1  // 上传成功后，重新打开上传组件时初始化组件，否则显示上一次的上传结果
         this.imagecropperShow = false
         this.crmBanner.imageUrl = data.url //上传之后接口返回图片地址     

     },


     getInfo( id){  //根据讲师id查询的方法
         banner.getById(id)
         .then(response=>{
             console.log(response.data.crmBanner)
             this.crmBanner = response.data.crmBanner
    })
     },
     updateTeacher(crmBanner){ //修改讲师
           banner.updateBammer(this.crmBanner)
           .then(response =>{
               this.$message({   
         type: 'success',
         message: '修改成功!' 
                    })
        //回到列表页面  路由跳转
         this.$router.push({path:'/Banner/table'})  
           })

     },
     init(){  //抽取的共用方法方便在created和watch里面调用,
         if(this.$route.params && this.$route.params.id){ //判断路由路径是否有id值
              const id =  this.$route.params.id //从路径获取id值
              this.getInfo(id) //调用根据id查询的方法
              this.teacherTitle = "讲师编辑列表"
       }else{   
           this.crmBanner= {} , //这个清空无效，如果是点了修改再点击添加只是通过路由跳转了，但还是同一个页面，所以created() 只执行一次,解决办法是通过watch监听一个变量变化后就执行一次初始化组件
           this.crmBanner.imageUrl= process.env.OSS_PATH+'/2022/02/12/fcdea541da5b438b8a33f272c12e6c9efile.png', 
           this.teacherTitle = "讲师添加列表"
       }
     }

  }
}
</script>
